import { DotLoading } from 'antd-mobile'
import { useStreams } from '@/lib/utils'
import { Login } from '@/mobile/views/login'
import services from '@/services'
import { LoginStatus } from '@/services/auth'
import { AntdWrapper } from './init/antd'
import { ErrorBoundary } from './init/error'
import { Router } from './router'

export function App() {
  return <ErrorBoundary>
    <AntdWrapper>
      <AppContent />
    </AntdWrapper>
  </ErrorBoundary>
}

function AppContent() {
  const [info] = useStreams(services.auth.info$)
  if (info.status === LoginStatus.NeedConfirm) return <AuthConfiming />
  else if (info.status !== LoginStatus.LoggedIn) return <Login />
  else return <Router />
}

function AuthConfiming() {
  return <div css={{ textAlign: 'center', marginTop: '30vh', fontSize: '1.2em', color: '#777' }}>
    <DotLoading />
    <span>登录中</span>
  </div>
}
